<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>ScrollMagic Class: Controller</title>
	
  <script src="scripts/prettify/prettify.js"> </script>
  <script src="scripts/prettify/lang-css.js"> </script>
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
	<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
	<link rel="shortcut icon" href="../assets/img/favicon.ico" type="image/x-icon">

	
	<link type="text/css" rel="stylesheet" href="styles/site.cosmo.css">
	
</head>

<body>
<div class="container-fluid">
	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="index.html">ScrollMagic</a>
			<ul class="nav">
				
				<li class="dropdown">
					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="ScrollMagic.Controller.html">Controller</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html">Scene</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="ScrollMagic.Scene.html#event:add">add</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:change">change</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:destroy">destroy</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:end">end</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:enter">enter</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:leave">leave</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:progress">progress</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:remove">remove</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:shift">shift</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:start">start</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:update">update</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="mixins.list.html" class="dropdown-toggle" data-toggle="dropdown">Plugins<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="animation.GSAP.html">GSAP</a>
						</li>
						
						<li>
							<a href="animation.Velocity.html">Velocity</a>
						</li>
						
						<li>
							<a href="debug.addIndicators.html">addIndicators</a>
						</li>
						
						<li>
							<a href="framework.jQuery.html">jQuery</a>
						</li>
						

					</ul>
				</li>
				
			</ul>
		</div>
	</div>

	<div class="row-fluid">

		
		<div class="span8">
			
				<div id="main">
					


	<h1 class="page-title">
        <span class="ancestors"><a href="ScrollMagic.html">ScrollMagic</a>.</span>Controller</h1>
    
<section>

<article>
    <div class="container-overview">
    

    
        
<dt>
    <h4 class="name" id="constructor"><span class="type-signature"></span>new ScrollMagic.Controller<span class="signature">(<span class="optional">options</span>)</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>The main class that is needed once per scroll container.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>An object containing one or more options for the controller.</p>
                <h6>Properties</h6>
                

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>container</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>
|

<span class="param-type">object</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    window
                
                </td>
            

            <td class="description last"><p>A selector, DOM object that references the main container for scrolling.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>vertical</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    true
                
                </td>
            

            <td class="description last"><p>Sets the scroll mode to vertical (<code>true</code>) or horizontal (<code>false</code>) scrolling.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>globalSceneOptions</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    {}
                
                </td>
            

            <td class="description last"><p>These options will be passed to every Scene that is added to the controller using the addScene method. For more information on Scene options see <a href="ScrollMagic.Scene.html"><code>ScrollMagic.Scene</code></a>.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>loglevel</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    2
                
                </td>
            

            <td class="description last"><p>Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.</p>
<ul>
<li><code>0</code> =&gt; silent</li>
<li><code>1</code> =&gt; errors</li>
<li><code>2</code> =&gt; errors, warnings</li>
<li><code>3</code> =&gt; errors, warnings, debuginfo</li>
</ul></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>refreshInterval</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    100
                
                </td>
            

            <td class="description last"><p>Some changes don't call events by default, like changing the container size or moving a scene trigger element.<br>                                                                                                          This interval polls these parameters to fire the necessary events.<br>                                                                                                          If you don't use custom containers, trigger elements or have static layouts, where the positions of the trigger elements don't change, you can set this to 0 disable interval checking and improve performance.</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-27">line 27</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// basic initializationvar controller = new ScrollMagic.Controller();// passing optionsvar controller = new ScrollMagic.Controller({container: "#myContainer", loglevel: 3});</pre>


    
</dd>

    
    </div>

    

    

    

    

    

    

    
        <h3 class="subsection-title">Control Methods</h3>

        <dl>
            
<dt>
    <h4 class="name" id="addScene"><span class="type-signature"></span>addScene<span class="signature">(newScene)</span><span class="type-signature"> &rarr; {Controller}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Add one ore more scene(s) to the controller.<br>This is the equivalent to <code>Scene.addTo(controller)</code>.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newScene</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="ScrollMagic.Scene.html">ScrollMagic.Scene</a></span>
|

<span class="param-type">array</span>


            
            </td>

            

            

            <td class="description last"><p>ScrollMagic Scene or Array of Scenes to be added to the controller.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-287">line 287</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Controller</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// with a previously defined scenecontroller.addScene(scene);// with a newly created scene.controller.addScene(new ScrollMagic.Scene({duration : 0}));// adding multiple scenescontroller.addScene([scene, scene2, new ScrollMagic.Scene({duration : 0})]);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="destroy"><span class="type-signature"></span>destroy<span class="signature">(<span class="optional">resetScenes</span>)</span><span class="type-signature"> &rarr; {null}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Destroy the Controller, all Scenes and everything.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>resetScenes</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>If <code>true</code> the pins and tweens (if existent) of all scenes will be reset.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-658">line 658</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Null to unset handler variables.</p>

	{
<span class="param-type">null</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// without resetting the scenescontroller = controller.destroy();// with scene resetcontroller = controller.destroy(true);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="removeScene"><span class="type-signature"></span>removeScene<span class="signature">(Scene)</span><span class="type-signature"> &rarr; {Controller}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Remove one ore more scene(s) from the controller.<br>This is the equivalent to <code>Scene.remove()</code>.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>Scene</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="ScrollMagic.Scene.html">ScrollMagic.Scene</a></span>
|

<span class="param-type">array</span>


            
            </td>

            

            

            <td class="description last"><p>ScrollMagic Scene or Array of Scenes to be removed from the controller.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-330">line 330</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Controller</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// remove a scene from the controllercontroller.removeScene(scene);// remove multiple scenes from the controllercontroller.removeScene([scene, scene2, scene3]);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="scrollTo"><span class="type-signature"></span>scrollTo<span class="signature">(scrollTarget, <span class="optional">additionalParameter</span>)</span><span class="type-signature"> &rarr; {Controller}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scroll to a numeric scroll offset, a DOM element, the start of a scene or provide an alternate method for scrolling.<br>For vertical controllers it will change the top scroll offset and for horizontal applications it will change the left offset.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>scrollTarget</code></td>
            

            <td class="type">
            
                
<span class="param-type">mixed</span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last"><p>The supplied argument can be one of these types:</p>
<ol>
<li><code>number</code> -&gt; The container will scroll to this new scroll offset.</li>
<li><code>string</code> or <code>object</code> -&gt; Can be a selector or a DOM object.<br>The container will scroll to the position of this element.</li>
<li><code>ScrollMagic Scene</code> -&gt; The container will scroll to the start of this scene.</li>
<li><code>function</code> -&gt; This function will be used for future scroll position modifications.<br>This provides a way for you to change the behaviour of scrolling and adding new behaviour like animation. The function receives the new scroll position as a parameter and a reference to the container element using <code>this</code>.<br>It may also optionally receive an optional additional parameter (see below)<br><em><strong>NOTE:</strong><br>All other options will still work as expected, using the new function to scroll.</em></li>
</ol></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>additionalParameter</code></td>
            

            <td class="type">
            
                
<span class="param-type">mixed</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>If a custom scroll function was defined (see above 4.), you may want to supply additional parameters to it, when calling it. You can do this using this parameter – see examples for details. Please note, that this parameter will have no effect, if you use the default scrolling function.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    
    <dt class="tag-since">Since:</dt>
    <dd class="tag-since"><ul class="dummy"><li>1.1.0</dd><br>
    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-477">line 477</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Controller</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// scroll to an offset of 100controller.scrollTo(100);// scroll to a DOM elementcontroller.scrollTo("#anchor");// scroll to the beginning of a scenevar scene = new ScrollMagic.Scene({offset: 200});controller.scrollTo(scene);// define a new scroll position modification function (jQuery animate instead of jump)controller.scrollTo(function (newScrollPos) {	$("html, body").animate({scrollTop: newScrollPos});});controller.scrollTo(100); // call as usual, but the new function will be used instead// define a new scroll function with an additional parametercontroller.scrollTo(function (newScrollPos, message) { console.log(message);	$(this).animate({scrollTop: newScrollPos});});// call as usual, but supply an extra parameter to the defined custom functioncontroller.scrollTo(100, "my message");// define a new scroll function with an additional parameter containing multiple variablescontroller.scrollTo(function (newScrollPos, options) { someGlobalVar = options.a + options.b;	$(this).animate({scrollTop: newScrollPos});});// call as usual, but supply an extra parameter containing multiple optionscontroller.scrollTo(100, {a: 1, b: 2});// define a new scroll function with a callback supplied as an additional parametercontroller.scrollTo(function (newScrollPos, callback) {	$(this).animate({scrollTop: newScrollPos}, 400, "swing", callback);});// call as usual, but supply an extra parameter, which is used as a callback in the previously defined custom scroll functioncontroller.scrollTo(100, function() {	console.log("scroll has finished.");});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">(<span class="optional">immediately</span>)</span><span class="type-signature"> &rarr; {Controller}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Updates the controller params and calls updateScene on every scene, that is attached to the controller.<br>See <code>Controller.updateScene()</code> for more information about what this means.<br>In most cases you will not need this function, as it is called constantly, whenever ScrollMagic detects a state change event, like resize or scroll.<br>The only application for this method is when ScrollMagic fails to detect these events.<br>One application is with some external scroll libraries (like iScroll) that move an internal container to a negative offset instead of actually scrolling. In this case the update on the controller needs to be called whenever the child container's position changes.<br>For this case there will also be the need to provide a custom function to calculate the correct scroll position. See <code>Controller.scrollPos()</code> for details.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>immediately</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>If <code>true</code> the update will be instant, if <code>false</code> it will wait until next update cycle (better performance)</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-408">line 408</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Controller</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// update the controller on next cycle (saves performance due to elimination of redundant updates)controller.update();// update the controller immediatelycontroller.update(true);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="updateScene"><span class="type-signature"></span>updateScene<span class="signature">(Scene, <span class="optional">immediately</span>)</span><span class="type-signature"> &rarr; {Controller}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Update one ore more scene(s) according to the scroll position of the container.<br>This is the equivalent to <code>Scene.update()</code>.<br>The update method calculates the scene's start and end position (based on the trigger element, trigger hook, duration and offset) and checks it against the current scroll position of the container.<br>It then updates the current scene state accordingly (or does nothing, if the state is already correct) – Pins will be set to their correct position and tweens will be updated to their correct progress.<br><em><strong>Note:</strong> This method gets called constantly whenever Controller detects a change. The only application for you is if you change something outside of the realm of ScrollMagic, like moving the trigger or changing tween parameters.</em></p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>Scene</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="ScrollMagic.Scene.html">ScrollMagic.Scene</a></span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            
                <td class="default">
                
                </td>
            

            <td class="description last"><p>ScrollMagic Scene or Array of Scenes that is/are supposed to be updated.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>immediately</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>If <code>true</code> the update will be instant, if <code>false</code> it will wait until next update cycle.<br>                                               This is useful when changing multiple properties of the scene - this way it will only be updated once all new properties are set (updateScenes).</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-369">line 369</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Controller</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// update a specific scene on next cyclecontroller.updateScene(scene);// update a specific scene immediatelycontroller.updateScene(scene, true);// update multiple scenes scene on next cyclecontroller.updateScene([scene1, scene2, scene3]);</pre>


    
</dd>

        </dl>
    
        <h3 class="subsection-title">Parameters (getter / setter)</h3>

        <dl>
            
<dt>
    <h4 class="name" id="enabled"><span class="type-signature"></span>enabled<span class="signature">(<span class="optional">newState</span>)</span><span class="type-signature"> &rarr; {boolean|Controller}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the current enabled state of the controller.<br>This can be used to disable all Scenes connected to the controller without destroying or removing them.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newState</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new enabled state of the controller <code>true</code> or <code>false</code>.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-634">line 634</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Current enabled state or parent object for chaining.</p>

	{
<span class="param-type">boolean</span>
|

<span class="param-type">Controller</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current valuevar enabled = controller.enabled();// disable the controllercontroller.enabled(false);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="loglevel"><span class="type-signature"></span>loglevel<span class="signature">(<span class="optional">newLoglevel</span>)</span><span class="type-signature"> &rarr; {number|Controller}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the current loglevel option value.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newLoglevel</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new loglevel setting of the Controller. <code>[0-3]</code></p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-608">line 608</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Current loglevel or parent object for chaining.</p>

	{
<span class="param-type">number</span>
|

<span class="param-type">Controller</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current valuevar loglevel = controller.loglevel();// set a new valuecontroller.loglevel(3);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="scrollPos"><span class="type-signature"></span>scrollPos<span class="signature">(<span class="optional">scrollPosMethod</span>)</span><span class="type-signature"> &rarr; {number|Controller}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> the current scrollPosition or <strong>Set</strong> a new method to calculate it.<br>-&gt; <strong>GET</strong>:<br>When used as a getter this function will return the current scroll position.<br>To get a cached value use Controller.info(&quot;scrollPos&quot;), which will be updated in the update cycle.<br>For vertical controllers it will return the top scroll offset and for horizontal applications it will return the left offset.</p>
<p>-&gt; <strong>SET</strong>:<br>When used as a setter this method prodes a way to permanently overwrite the controller's scroll position calculation.<br>A typical usecase is when the scroll position is not reflected by the containers scrollTop or scrollLeft values, but for example by the inner offset of a child container.<br>Moving a child container inside a parent is a commonly used method for several scrolling frameworks, including iScroll.<br>By providing an alternate calculation function you can make sure ScrollMagic receives the correct scroll position.<br>Please also bear in mind that your function should return y values for vertical scrolls an x for horizontals.</p>
<p>To change the current scroll position please use <code>Controller.scrollTo()</code>.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>scrollPosMethod</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The function to be used for the scroll position calculation of the container.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-542">line 542</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Current scroll position or parent object for chaining.</p>

	{
<span class="param-type">number</span>
|

<span class="param-type">Controller</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current scroll Positionvar scrollPos = controller.scrollPos();// set a new scroll position calculation methodcontroller.scrollPos(function () {	return this.info("vertical") ? -mychildcontainer.y : -mychildcontainer.x});</pre>


    
</dd>

        </dl>
    
        <h3 class="subsection-title">Properties (getter)</h3>

        <dl>
            
<dt>
    <h4 class="name" id="info"><span class="type-signature"></span>info<span class="signature">(<span class="optional">about</span>)</span><span class="type-signature"> &rarr; {mixed|object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> all infos or one in particular about the controller.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>about</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>If passed only this info will be returned instead of an object containing all.<br>                                  Valid options are:</p>
<ul>
<li><code>&quot;size&quot;</code> =&gt; the current viewport size of the container</li>
<li><code>&quot;vertical&quot;</code> =&gt; true if vertical scrolling, otherwise false</li>
<li><code>&quot;scrollPos&quot;</code> =&gt; the current scroll position</li>
<li><code>&quot;scrollDirection&quot;</code> =&gt; the last known direction of the scroll</li>
<li><code>&quot;container&quot;</code> =&gt; the container element</li>
<li><code>&quot;isDocument&quot;</code> =&gt; true if container element is the document.</li>
</ul></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Controller.js.html">ScrollMagic/Controller.js</a>, <a href="ScrollMagic_Controller.js.html#sunlight-1-line-575">line 575</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>The requested info(s).</p>

	{
<span class="param-type">mixed</span>
|

<span class="param-type">object</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// returns the current scroll position (number)var scrollPos = controller.info("scrollPos");// returns all infos as an objectvar infos = controller.info();</pre>


    
</dd>

        </dl>
    

    

    
</article>

</section>




				</div>

				<div class="clearfix"></div>
				<footer>
					
					
		<span class="copyright">
		© Jan Paepke 2015
		</span>
					<br />
					
		<span class="jsdoc-message">
		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc" target="_blank">JSDoc 3.5.5</a>
		using a customized version of the <a href="https://github.com/terryweiss/docstrap" target="_blank">DocStrap template</a>.
		</span>
				</footer>
			</div>

			
			<div class="span3">
				<div id="toc"></div>
			</div>
			
			<br clear="both">
		</div>

	</div>
	<script src="scripts/sunlight.js"></script>
	<script src="scripts/sunlight.javascript.js"></script>
	<script src="scripts/sunlight-plugin.doclinks.js"></script>
	<script src="scripts/sunlight-plugin.linenumbers.js"></script>
	<script src="scripts/sunlight-plugin.menu.js"></script>
	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.scrollTo.js"></script>
	<script src="scripts/jquery.localScroll.js"></script>
	<script src="scripts/bootstrap-dropdown.js"></script>
	<script src="scripts/toc.js"></script>

	<script> prettyPrint(); </script>
	<script>  Sunlight.highlightAll({lineNumbers:true,  showMenu: true, enableDoclinks :true}); </script>

	<script>
		function openDeeplinkedElement (skipAni) {
			try {
				$("dt h4.member-collapsed").filter(window.location.hash.substring(1).replace(":", "\\:")).trigger("click", skipAni);
			} catch (e) {
				console.warn("ah ah ah! :p");
			}
		}
		$( function () {
			$( "#toc" ).toc( {
			    anchorName  : function(i, heading, prefix) {
					return $(heading).attr("id") || ( prefix + i );
				},
				selectors   : "h1:visible,h2:visible,h3:visible,h4:visible",
				onScrollFinish : openDeeplinkedElement,
				highlightOffset : 10,
				scrollOffset: 60
			} );
			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
			$( "#main span[id^='toc']" ).addClass( "toc-shim" );

		} );
	</script>

	
	<script>
		$( function () {
			// $('#main').localScroll({
			// 	offset: { top: 56 } //offset by the height of your header (give or take a few px, see what works for you)
			// });
			// workaround for anchors below header...
			window.setTimeout(function () {
				$(document).scrollTop($(document).scrollTop()-60);
			}, 1)
			
			var hash = window.location.hash.substring(1).replace(":", "\\:");
			$( "dt h4.name" ).each( function () {
				var $this = $( this );
				var icon = $( "<i/>" ).addClass( "icon-plus-sign" ).addClass( "pull-right" ).addClass( "icon-white" );
				var dt = $this.parents( "dt" );
				var children = dt.next( "dd" );

				$this.append( icon ).css( {cursor : "pointer"} );
				$this.addClass( "member-collapsed" ).addClass( "member" );
				if (hash != $this.attr("id")) {
					children.hide();
				}
				$this.toggle( function (e, skipAni) {
					var scrollPos = $(document).scrollTop();
					window.location.hash = $(this).attr("id");
					$(document).scrollTop(scrollPos);
					icon.addClass( "icon-minus-sign" ).removeClass( "icon-plus-sign" ).removeClass( "icon-white" );
					$this.addClass( "member-open" ).removeClass( "member-collapsed" );
					children.slideDown(skipAni ? 0 : undefined);
				}, function () {
					icon.addClass( "icon-plus-sign" ).removeClass( "icon-minus-sign" ).addClass( "icon-white" );
					$this.addClass( "member-collapsed" ).removeClass( "member-open" );
					children.slideUp();
				} );
			} );
			// open if deeplinked
			if (hash.length > 0)
				openDeeplinkedElement(true);
		} );
	</script>
	

	<script type="text/javascript" src="../assets/js/tracking.js"></script>
</body>
</html>